<template>
	<div class="topic-container">
		<c-loading v-if="hint.show"></c-loading>
		<!-- 文章部分 -->
		<div class="topic">
			<div class="topic-header">
				<h2>
					<span v-if="topic.top" class="top">置顶</span>
					<span v-if="topic.good" class="top">精华</span>
					{{topic.title}}
				</h2>
				<div class="info">
					<span>发布于{{topic.create_at | timeToNow}}</span>
					<span>作者{{topic.author.loginname}}</span>
					<span>{{topic.visit_count}}次浏览</span>
					<span>来自 {{topic.tab | transTab}}</span>
				</div>
			</div>
			<div class="topic-content">
				<div class="markdown-body" v-html="topic.content"></div>
			</div>
		</div>
		<!-- 评论部分 -->
		<div class="comment" v-if="topic.reply_count !== 0">
			<div class="comment-header">
				{{topic.reply_count}}条评论
			</div>
			<div class="comment-content" v-for="comment in topic.replies">
				<div class="user-info">
					<span class="user-img">
						<img :src="comment.author.avatar_url" alt="avater">
					</span>
					<span class="user-name">{{comment.author.loginname}}</span>
					<span>{{comment.create_at | timeToNow }}</span>
					<div class="user-action">
			            <a href="#"><i class="fa fa-thumbs-o-up"></i> {{ comment.ups.length }}</a>
			            <a href="#"><i class="fa fa-reply"></i></a>
			         </div>
				</div>
				<div class="comments markdown-body" v-html="comment.content"></div>
			</div>
		</div>
	</div>
</template>

<script>
	 import cLoading from '../components/loading';
	 import { mapGetters, mapActions } from 'vuex';

	 export default {
	 	data() {
	 		return {};
	 	},
	 	components: {
	 		cLoading
	 	},
	 	beforeMount(){
	 		this.initHint();
	 		this.showHint();
	 		this.fetchTopic(this.$route.params.id)
	 			.catch((e) => console.log(e));
	 	},
	 	computed: {
	 		...mapGetters({
	 			hint: 'getHint',
	 			topic: 'getTopic'
	 		})
	 	},
	 	methods: {
	 		...mapActions([
	 			'initHint',
	 			'showHint',
	 			'fetchTopic'
	 		]),
	 	}
	 };
</script>

<style lang='scss' scoped>
 	@import '../assets/lib/github-markdown.css';
	.topic-container{
		width: 90%;
		overflow: hidden;
		margin-bottom: 20px;
	}
	.topic{
		width: 100%;
		overflow: hidden;
		background-color: #fff;
		margin-bottom: 20px;
	}
	.topic-header{
		padding: 10px;
	}
	.topic-content{
		padding: 15px;
	}
	.top{
		background-color: #80BD01;
	    font-size: .6em;
	    padding: 3px;
	    color: #FFF;
	    margin: 0 3px;
	    border-radius: 3px;
	}
	.info {
	    color: #838383;
	    font-size: 12px;
	  	span {
	  		&:before {
	    	 	content: '•';
	   		}
		}
	}
	.user-info{
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		padding: 10px;
		overflow: hidden;
		span{
			display: block;
			float: left;
			height: 30px;
			line-height: 30px;
			padding-left: 5px;
		}
		.user-name{
			color: #999;
		}
		.user-img{
			img{
				width: 30px;
				border-radius: 3px;
			}
		}
	}
	.user-action{
		float: right;
	}
	.comment{
		padding: 10px;
		background-color: #fff;
	}
	.comments{
		margin-left: 46px;
	}
</style>